@import "indexcommon";

/** 上右侧的房型、房间 */
#roomTypeContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: hidden;

    table {
        width: auto;

        td {
            padding: 0px;
            text-align: center;
            vertical-align: middle;
            border-right: 1px solid #ccc;

            & > div {
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    #roomList {
        .roomTypeItem {
            padding: 0px;

            & > div {
                height: 24px;
                line-height: 24px;
            }

            &[colspan="1"] > div {
                width: 98px;
            }

            &[colspan="2"] > div {
                width: 196px;
            }

            &[colspan="3"] > div {
                width: 294px;
            }

            border-bottom: 1px solid #ccc;
        }

        .roomTypeItemCount {
            padding: 0px;

            & > div {
                width: 98px;
                height: 24px;
                line-height: 24px;
            }

            border-bottom: 1px solid #ccc;
        }

        .roomItem {
            position: relative;
            width: 98px;
            height: 25px;
            line-height: 25px;

            &.highlight {
                background-color: #daecc7;
            }

            .roomItem-detail-name {
                display: block;
                float: left;
                width: 87px;
                min-width: 60px;
                max-width: 87px;
                text-align: left;
                height: 25px;
                line-height: 25px;
                padding: 0 6px;
                white-space: nowrap;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .iconfont {
                display: none;
                float: left;
                margin-right: 6px;
                margin-top: 6px;
                font-size: 10px;
                border-radius: 50%;
                border: 1px dashed #ccc;
                color: #ccc;
                width: 20px;
                height: 20px;
                line-height: 20px;
            }

            &:hover {
                .iconfont {
                    display: block;
                }

                .roomItem-detail-name {
                    width: 60px;
                    padding: 0 2px 0 6px;
                }
            }

            &[data-status="1"] {
                .roomItem-detail-name {
                    width: 60px;
                    padding: 0 2px 0 6px;
                }

                .iconfont {
                    display: block;
                    border-color: #8BC34A;
                    color: #8BC34A;
                }
            }
        }
    }
}

/** 右侧的空订单 有订单和左侧的日期 */
#calendarOrderContainer {
    position: absolute;
    top: 51px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    table {
        width: 200px;

        td {
            min-width: 98px;
            height: 45px;
            padding: 0px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid #ccc;

            &:hover {
                background-color: #daecc7;
            }

            .td-position{
                height: 45px;
                position: relative;
                & > div {
                    height: 100%;
                    line-height: 45px;
                    font-size: 12px;
                    overflow: hidden;
                }             
            }
            & > div {
                font-size: 12px;
            } 
        }

        .table-tr-hidden {
            visibility: hidden;
        }

        .table-tr-hidden td {
            border: 0px;
        }
    }
}

#calendarScrollContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: scroll;
    overflow-y: hidden;
}

/** 日期显示 */
#calendar {
    .calendar-day {
        font-size: 12px;
        border-right: 1px solid #cccccc;
        user-select: none;

        &:hover {
            background-color: #daecc7;
        }

        &.highlight {
            background-color: #daecc7;
        }

        .calendar-day-count {
            color: #333333;
            float: left;
            width: 44px;
            line-height: 45px;
            text-align: left;
            height: 45px;
            overflow: hidden;
            padding-left: 16px;
        }

        .calendar-day-text {
            width: auto;
            overflow: hidden;
            white-space: nowrap;
            text-align: right;
            margin-left: 60px;
            line-height: 45px;
            height: 45px;
            padding-right: 16px;
        }

        .day-text {
            color: #000000;
        }

        .week-text {
            padding-left: 4px;
            color: #727272;
        }

        &.today {
            background-color: #daecc7;

            .calendar-day-count,
            .day-text,
            .week-text {
                color: #ff6e40;
            }
        }

        &.has-festival {
            .week-text {
                color: #ff6e40;
            }
        }
    }
}

/** 右侧的空订单 有订单*/
#orderArea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: scroll;
    overflow-y: scroll;
    background: #eeeeee;

    table td {
        border-left: 0px;
        background: #ffffff;
    }

    #orderListBody {
        .order-item-td.highlight {
            background-color: #daecc7;
        }

        .order-item {
            line-height: 22px;
            font-size: 12px;
            text-align: left;
            text-indent: 8px;
            color: white;

            &:hover {
                box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
                transform: scale(1.01, 1.01);
            }

            .order-customer {
                overflow: hidden;
                padding-right: 30px;
                height: 22px;
                word-break: break-all;
            }

            .order-channel {
                overflow: hidden;
                padding-right: 8px;
                height: 22px;
                word-break: break-all;
            }

            .order-icon {
                position: absolute;
                right: 8px;
                top: 8px;
            }

            &.status-out {
                background-color: #bdbdbd;
            }

            &.status-not-in {
                background-color: #7bb041;
            }

            &.status-in {
                background-color: #f9b100;
            }
            &.status-need-out {
                background-color: #ff5400;
            }                 
            &.checkout{
                overflow: inherit;
            }         
        }
        .order-hour {
            &:hover {
                box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
            }
            .order-hour-num{
                line-height: normal;
                color: red;
            }
        }   
        .order-hour-container,.order-item-container{
            position: absolute;
            left: 98px;
            top: -1px;
            border-bottom:0;
            z-index: 1000;
            color: #fff;
            background-color: #fff;
            border-radius: 4px;
            padding: 4px;
            box-shadow: 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2);
            background-clip: padding-box;
            .order-item-tip{
                background-color: #333740;
                border-bottom:1px solid #CCCCCC ;
                padding: 4px 16px;
                z-index: 1000;
                .order-customer {
                    display: inline;
                }        
                .order-info{
                    right: 8px;
                    top: 2px;
                }
            }
        }
        .order-item-container{
            left: -1px;
        }     
    }
}
#calendarOrderContainer table td .td-position>div.order-hour{
    overflow: inherit;
}
#calendarOrderContainer table td .td-position>div.order-hour-container{
    overflow: inherit;
    height: auto;
}
#calendarOrderContainer table td .td-position>div.order-hour-box{
    width: 24px;
    float: right;
}
#calendarOrderContainer table td .td-position>div.order-hour-box-other{
    width: 56px;
    float: left;
}
.room-icon01{
    background: url('image/hour-icon02.png') 8px 24px no-repeat;
    background-size: 14px;
}
.room-icon02{
    background: url('image/long.png') 8px 24px no-repeat;
    background-size: 14px;
}
.room-icon03{
    background: url('image/hour-icon02.png') 8px 24px no-repeat,
                url("image/long.png") 28px 24px no-repeat;
    background-size: 14px;
}
#roomDateContainer{
    height: 70px;
}
#calendarOrderContainer{
    top: 71px;
}
#roomTypeContainer #roomList .roomItem{
    height: 45px;
}
#roomDateContainer #datePickerLast, #roomDateContainer #datePickerNext{
    line-height: 70px;
}
#roomDateContainer #datePicker{
    padding-top: 20px;
    padding-bottom: 16px;
}
#calendarOrderContainer table td .td-position>div.maintain-icon{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 4px;
    right: 4px;
    background: url('/Public/dist/Home/image/repair.png') center no-repeat; 
} 

.maintain{
    position: absolute;
    top: 60px;
    width:161px;
    height: 91px;
    padding-top: 9px;
    z-index: 1000;
    background: url('/Public/dist/Home/image/maintain-sp.png') center no-repeat;
}
#orderList{
    overflow-x:auto ;
}
